<template>
	<div id="actiNew" v-cloak>

		<!--工具条-->
		<div name="searchColums" id="searchColums">
			<el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
				<el-form-item class="el-form-item" label="发送人名称">
					<el-input v-model="filters.name" name="fromUser" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>

				<span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getTasks(true)">查询</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
			    	</el-form-item>
				</span>
			</el-form>
		</div>
		<!--toolbar-->
		<!--<el-row id="toolbar">
			<el-col :span="24">
				<div class="grid-content bg-purple-light">
					<el-button type="primary" size="mini" v-if="smsWarnFlag" icon="el-icon-edit" @click="handleAdd">新增流程</el-button>
					<el-button type="primary" size="mini" @click="batchRemove" :disabled="this.sels.length===0" icon="el-icon-delete">批量删除
					</el-button>

				</div>
			</el-col>
		</el-row>-->

		<!--列表-->
		<el-table :data="taskDatas" id="datagrid" empty-text=" " height="410" border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="id"  label="编号" width="100"></el-table-column>
			<el-table-column prop="title" label="标题"  show-overflow-tooltip></el-table-column>
			<el-table-column prop="fromUser" label="发送人" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="name" label="任务名称" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="createTime" label="开始时间" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleBanli(scope.$index, scope.row)">办理</el-button>
					<el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar" id="pageDiv">
			<el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
		</el-col>

		
		<!--审批界面-->
		<el-dialog title="审批" :visible.sync="addFormVisible" :close-on-click-modal="false" @close="resetForm('addForm')">
			<feeapply ref="form" :pid="pid"></feeapply>
			<el-form :model="spForm" label-width="120px"  ref="spForm" size="mini">
				<el-form-item :label="item.taskName" v-for="item in Opinions" :key="item.taskId" >
					<el-input v-model="item.opinion" disabled></el-input>
				</el-form-item>
				<el-form-item label="审核意见">
					<el-input v-model="spForm.opinion"></el-input>
				</el-form-item>
				<el-form-item label="下级审核人" v-if="opNameVisible">
					<el-input v-model="spForm.opName">
						<el-button slot="append" icon="el-icon-search" @click.native="showUserSelect"></el-button>
					</el-input>
				</el-form-item>
				<el-input v-model="spForm.opId" v-show="false"></el-input>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
				<el-button @click.native="huiTuiClick">回退</el-button>
			</div>
		</el-dialog>

		<el-dialog title="" :visible.sync="dialogDeptVisible">
			<userTree ref="building_tree" deptProperty="0,1" @treeNode-click="treeNodeClick"></userTree>
		</el-dialog>

	</div>
</template>
<script>
	import { getToken, setToken, removeToken } from '@/util/auth'
	import request from '@/router/axios'
	import {mapGetters,mapState} from "vuex";
	import { fetchDeptTree, deptCommunityList } from '@/api/role'
	import feeapply from '../acti/feeapply.vue';
	import userTree from '../feeApplyRecord/userTree.vue';
	export default {
		name: 'table_community_info',
		components: {
		    feeapply,
		    userTree
		},
		data() {
			return {
				treeDeptData: [],
				checkedKeys: [],
				filters: {
					name: ''
				},
				url: {
					list: '/acti/process/showTaskList',
					del: '/admin/community/doDel',
					shenhe: '/acti/process/completeTask',
					edit: '/admin/community/doUpdate'
				},
				taskDatas: [],
				fileList: [],
				Opinions:[],
				taskId:"",
				total: 0,
				pid:'',
				opNameVisible:false,
				smsWarnFlag:false,
				page: 1,
				pageSize: 10,
				sort: {
					sort: 'sort',
					order: 'asc'
				},
				listLoading: false,
				sels: [], //列表选中列
				dialogDeptVisible: false,
				editLoading: false,
				dialogStatus: '',
				deptOptions: [],
				process_engine:"",
				addFormVisible: false, //新增界面是否显示
				addLoading: false,
				spForm:{
					opinion:"",
					opId:"",
					opName:""
				},
				addFormRules: {
					name: [{
						required: true,
						message: '请输入小区名称'
					}]
				},

				defaultProps: {
					children: 'children',
					label: 'name'
				},
				//数据字典
				propertyRightOptions: [],
				restaurantsDept: []
			}
		},

		methods: {
			treeNodeClick(data,node) {
				if(!(data.type=="user")){
					return;
				}
				this.spForm.opId = data.id;
				this.spForm.opName=data.name;
				this.dialogDeptVisible = false;
			},
			handleDept() {
				fetchDeptTree().then(response => {
					this.treeDeptData = response.data
					this.dialogDeptVisible = true
				})
			},
			handleSortChange(sort) {
				this.sort = {
					sort: sort.prop,
					order: sort.order == 'ascending' ? 'asc' : 'desc'
				};
				this.getTasks();
			},
			tableRowClassName(row, index) {
				//把每一行的索引放进row
				row.index = row.rowIndex
			},
			headStyle({
				row,
				rowIndex
			}) {
				return "table_head_style";
			},
			formatDate: function(row, column, cellValue, index) {
				return !!cellValue ? utilFormatDate(new Date(cellValue), 'yyyy-MM-dd') : '';
			},
			formatDateTime: function(row, column, cellValue, index) {
				return !!cellValue ? utilFormatDate(new Date(cellValue), 'yyyy-MM-dd hh:mm:ss') : '';
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getTasks();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.page = 1;
				this.getTasks();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			resetSearchForm(forName) {
				this.filters = {
					name: ''
				}
			},
			//获取用户列表
			getTasks(flag) {
				if(flag){
					this.page = 1;
				}
				let para = {
					params: {
						page: this.page,
						limit: this.pageSize,
						opId:this.userInfo.userId,
						fromUser: this.filters.fromUser
					}
				};
				this.listLoading = true;
				request.get(this.url.list, para).then((res) => {
					this.total = res.data.count;
					var datas = res.data.data;
					this.taskDatas = datas;
					this.listLoading = false;
				});
			},
			//删除
			handleDel: function(index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						id: row.id
					};
					request.get(this.url.del, {
						params: para
					}).then((res) => {
						this.listLoading = false;
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500
						});
						this.getTasks();
					});
				}).catch(() => {

				});
			},
			//显示审批界面
			handleBanli: function(index, row) {
				this.addFormVisible = true;
				var table = row.fromTable;
				this.taskId = row.id;
				var fromId = row.fromId;
				this.spForm={
					opinion:"",
					opId:"",
					opName:""
				};
				if(table=="fee_apply_record"){
					if(row.name=="部门经理审批"){
						this.opNameVisible = false;
					}else{
						this.opNameVisible=true;
					}
					this.pid = fromId;
					this.Opinions = row.opinionVoList;
					this.$nextTick(()=>{
						this.$refs['form'].initData();
					})
				}
				
				
			},
			//审核
			addSubmit: function() {
				let para = {
					params: {
						taskId: this.taskId,
						opinion: this.spForm.opinion,
						userId:this.userInfo.userId,
						opId:this.spForm.opId,
						opinion:this.spForm.opinion
					}
				};
				this.listLoading = true;
				request.get(this.url.shenhe, para).then((res) => {
					this.$message({
							message: '提交成功',
							type: 'success',
							duration: 1500
						});
					this.addFormVisible = false;
					this.listLoading = false;
					this.getTasks();
				});
			},
			//回退
			huiTuiClick(){
				
			},
			selsChange: function(sels) {
				this.sels = sels;
			},
			//初始化数据字典
			initDictsData: function() {
				//初始化部门列表
				request.get("admin/community/deptList").then((res) => {
					if(res.status === 200) {
						this.restaurantsDept = res.data;
					}
				});
			},

			querySearch(queryString, cb) {
				var restaurants = this.restaurantsDept;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return(restaurantsDept) => {
					return(restaurantsDept.name.toString().indexOf(queryString) === 0);
				};
			},

			handleSelect(item) {
				if(this.addFormVisible) {
					this.addForm.deptId = item.deptId;
					this.addForm.deptName = item.name;
				} else {
					this.editForm.deptId = item.deptId;
					this.editForm.deptName = item.name;
				}

			},
			handleIconClick(ev) {
				console.log(ev);
			},
			showUserSelect(){
				this.dialogDeptVisible =true;
			},
			initDictByCode: function(code, _this, dictOptionsName) {
				if(!code || !_this[dictOptionsName] || _this[dictOptionsName].length > 0)
					return;
				request.get(this.url.queryDict, {
					params: {
						typeGroupName: code
					}
				}).then((res) => {
					var data = res.data;
					if(data.success) {
						_this[dictOptionsName] = data.obj;
						_this[dictOptionsName].splice(0, 1); //去掉请选择
					}
				});
			}
		},
		mounted() {

			this.initDictsData();
			this.getTasks();
		},
		computed: {
      		...mapGetters(["permissions"]),
      		...mapState({
      			userInfo: state => state.user.userInfo
      		})
    	},
    	created() {
      		this.smsWarnFlag = this.permissions["sys_user_smswarn"];
    	}
	};
</script>